<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="signal.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 250px;
            height: 52px;
            padding: 15px 30px;
            border: 2px solid #ccc;
            border-radius: 16px;
            margin: 0 auto;
            background-color: #333;
        }
        
        .box .second {
            width: 60px;
            color: #666;
            font-size: 280%;
            line-height: 50px;
            padding-left: 6px;
            margin-left: 5px;
            border: 1px solid #fff
        }
        
        .box div {
            margin-left: 5px;
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 1px solid #666;
        }
        
        .box .second {
            border: 0;
            color: #eee;
        }
        
        .off {
            background-color: #eee;
        }
        
        .red {
            background-color: red;
        }
        
        .yellow {
            background-color: yellow;
        }
        
        .green {
            background-color: #26ff00;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div class="second" id="second"></div>
    </div>
</body>
<!-- javascript写的
<script>
    const red = document.getElementById('red');
    const yellow = document.getElementById('yellow');
    const green = document.getElementById('green');
    const second = document.getElementById('second');


    function setLight(color, time) {
        red.className = yellow.className = green.className = 'off';
        document.getElementById(color).className = color;
        second.textContent = time;
    }


    function countdown(color,time,nextColor,nextTime){
        setLight(color,time);
        const timer = setInterval(() => {
            time--;
            second.textContent = time;
            if (time==0) {
                clearInterval(timer)
                trafficLight(nextColor, nextTime);
            }
        }, 1000);
    }

    function trafficLight(color,time) {
        switch (color) {
            case 'green':
                countdown(color,time,'yellow',3)
                break;
            case 'yellow':
                countdown(color,time,'red',10)
                break;
            case 'red':
                countdown(color,time,'green',5)
                break;
        }
    }
    trafficLight('green',5);
</script> -->
<!-- jQuery写的 -->
<script>
$(document).ready(function(){
    function setLight(color,time) {
        $('#red,#yellow,#green').removeClass()
        $('#'+color).addClass(color)
        $('#second').text(time);    
    }

    function countdown(color,time,nextColor,nextTime){
        setLight(color,time);
        const timer = setInterval(() => {
            time--;
            $('#second').text(time);
            if (time==0) {
                clearInterval(timer);
                trafficLight(nextColor, nextTime);
            }    
        }, 1000);
    }
    function trafficLight(color,time) {
        switch (color) {
            case 'green':
                countdown(color,time,'yellow',3)
                break;
            case 'yellow':
                countdown(color,time,'red',10)
                break;
            case 'red':
                countdown(color,time,'green',5)
                break;
        }
    }
    
    trafficLight('green',5);
})
</script>
</html>